<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>派对广场</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: white;
        }
        .header {
            background-color: #61f46b; /* 顶部导航栏背景颜色 */
            color: rgb(0, 0, 0); /* 顶部导航栏文字颜色 */
            padding: 10px;
            text-align: center;
            font-size: 24px;
        }
        .tabs {
            display: flex;
            justify-content: space-around;
            background-color: #e8f5e9; /* 标签栏背景颜色 */
            padding: 10px 0;
        }
        .tab {
            flex: 1;
            text-align: center;
            padding: 10px;
            cursor: pointer;
        }
        .tab.active {
            background-color: #61f46b; /* 活动标签背景颜色 */
            color: white; /* 活动标签文字颜色 */
        }
        .content {
            padding: 20px;
            display: none; /* 默认隐藏所有内容区域 */
        }
        .card {
            background-color: white; /* 卡片背景颜色 */
            margin-bottom: 20px;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
        }
        .card img {
            width: 60px;
            height: 60px;
            border-radius: 8px;
            margin-right: 15px;
        }
        .card-content {
            flex: 1;
        }
        /* 底部导航样式 */
        #bnav{
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 9;
            background-color: #e8f5e9; /* 底部导航栏背景颜色 */
            padding: 10px 0; /* 底部导航栏内边距 */
        }
        #bnav ul{
            display: flex;
        }
        #bnav li{
            width:20%;
            text-align: center;
        }
        #bnav svg{
            width: 24px; /* SVG图标宽度 */
            height: 24px; /* SVG图标高度 */
            margin: 5px auto; /* SVG图标外边距 */
        }
        #bnav p{
            font-size: 14px; /* 文字大小 */
            color: #333; /* 文字颜色 */
        }
        /* 底部导航栏高亮样式 */
        #bnav .active svg path {
            fill: #61f46b;
        }
        #bnav .active p {
            color: #61f46b;
        }
    </style>
    <script src="./font/iconfont.js"></script>
    <link rel="stylesheet" href="./pub.css">
</head>
<body>

<div class="header">派对广场</div>

<div class="tabs">
    <div class="tab active" data-target=".content-party">派对</div>
    <div class="tab" data-target=".content-square">广场</div>
    <div class="tab" data-target=".content-follow">关注</div>
</div>

<div class="content content-party">
    <div class="card">
        <img src="./img/哈士奇.jpeg" alt="M-PETS宠物">
        <div class="card-content">
            <h3>M-PETS宠物</h3>
            <p>免费领养小可爱</p>
        </div>
    </div>
    <div class="card">
        <img src="./img/308.webp" alt="姚琛猜歌">
        <div class="card-content">
            <h3>姚琛猜歌</h3>
            <p>赢艺人签名照</p>
        </div>
    </div>
    <div class="card">
        <img src="./img/309.webp" alt="弹一弹">
        <div class="card-content">
            <h3>弹一弹</h3>
            <p>解锁听歌新体验</p>
        </div>
    </div>
</div>
<!-- 其他内容区域可以在这里添加 -->

<!-- 底部导航 -->
<nav id="bnav">
    <ul>
        <li>
            <a href="./shouye.html" class="active">
                <span>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-QQyinle"></use>
                    </svg>
                </span>
                <p>首页</p>
            </a>
        </li>
        <li>
            <a href="./zhibo.html">
                <span>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kejian"></use> 
                    </svg>
                </span>
                <p>直播</p>
            </a>
        </li>
        <li>
            <a href="./leida.html">
                <span>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-redian"></use>
                    </svg>
                </span>
                <p>雷达</p>
            </a>
        </li>
        <li>
            <a href="./shequ.html">
                <span>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shequ"></use>
                    </svg>
                </span>
                <p>社区</p>
            </a>
        </li>
        <li>
            <a href="./wode.html">
                <span>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wode"></use>
                    </svg>
                </span>
                <p>我的</p>
            </a>
        </li>
    </ul>
</nav>

<script>
    // 标签切换功能
    document.querySelectorAll('.tab').forEach(tab => {
        tab.addEventListener('click', function() {
            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
            this.classList.add('active');
            // 显示对应的内容区域
            document.querySelectorAll('.content').forEach(c => c.style.display = 'none');
            const contentToShow = this.getAttribute('data-target');
            if (contentToShow) {
                document.querySelector(contentToShow).style.display = 'block';
            }
          
        

        });
    });

    // 底部导航栏的高亮显示
    document.querySelectorAll('#bnav li a').forEach(link => {
        link.addEventListener('click', function() {
            document.querySelectorAll('#bnav li a').forEach(l => l.classList.remove('active'));
            this.classList.add('active');
        });
    });
</script>

</body>
</html>